<template>
  <div>
    <el-dialog
      :visible="open"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="850px"
      append-to-body
      @close="cancel()"
    >
      <div class="flex content" style="height: 600px">
        <!-- 左边 -->
        <div class="left">
          <div class="left_title">私信</div>
          <div class="left_list">
            <div
              class="left_list_item flex shou"
              @click="activeTitle = '全部'"
              v-if="type == 'teacher'"
            >
              <img
                class="left_list_item_icon"
                src="@/assets/images/classify/msgtype3.png"
                alt="加载失败"
              />
              <div>
                <div class="left_list_item_title rela">
                  <div class="titleUnread absolute" v-if="allUnread > 0">
                    {{ allUnread }}
                  </div>
                  全部
                </div>
                <div class="left_list_item_content overTxt">
                  {{ allUnread_tip }}
                </div>
              </div>
            </div>
            <div
              class="left_list_item flex shou"
              @click="activeTitle = '学校通知'"
            >
              <img
                class="left_list_item_icon"
                src="@/assets/images/classify/school.png"
                alt="加载失败"
              />
              <div>
                <div class="left_list_item_title rela">
                  <div class="titleUnread absolute" v-if="schoolUnread > 0">
                    {{ schoolUnread }}
                  </div>
                  学校通知
                </div>
                <div class="left_list_item_content overTxt">
                  {{ schoolUnread_tip }}
                </div>
              </div>
            </div>
            <div
              class="left_list_item flex shou"
              @click="activeTitle = '系统通知'"
            >
              <img
                class="left_list_item_icon"
                src="@/assets/images/classify/system.png"
                alt="加载失败"
              />
              <div>
                <div class="left_list_item_title rela">
                  <div class="titleUnread absolute" v-if="systemUnread > 0">
                    {{ systemUnread }}
                  </div>
                  系统通知
                </div>
                <div class="left_list_item_content overTxt">
                  {{ systemUnread_tip }}
                </div>
              </div>
            </div>
            <div
              class="left_list_item flex shou"
              @click="activeTitle = '问卷通知'"
              v-if="type == 'teacher'"
            >
              <img
                class="left_list_item_icon"
                src="@/assets/images/classify/msgtype1.png"
                alt="加载失败"
              />
              <div>
                <div class="left_list_item_title rela">
                  <div class="titleUnread absolute" v-if="questionnairesUnread > 0">
                    {{ questionnairesUnread }}
                  </div>
                  问卷通知
                </div>
                <div class="left_list_item_content overTxt">
                  {{ questionnaires_tip }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="right">
          <div class="flexBet flexColCenter" style="height: 72px">
            <div class="right_title flex">
              {{ activeTitle }}
              <!-- <img
                @click="clearUnread"
                class="clear_all_icon"
                src="@/assets/images/clear_all_icon.png"
                alt="加载失败"
              /> -->
            </div>
            <img
              class="right_close shou"
              src="@/assets/images/del.png"
              alt="加载失败"
              @click="cancel()"
            />
          </div>
          <div class="right_list">
            <el-collapse v-if="showList.length > 0">
              <el-collapse-item
                @click.stop.native="clickCollapse(item, index)"
                :name="item.noticeId"
                v-for="(item, index) in showList"
                :key="index"
              >
                <template slot="title">
                  <div class="flex t rela">
                    <div
                      class="unread absolute"
                      v-if="!item.readStatus || item.readStatus === 0"
                    ></div>
                    <div class="t_t overTxt">
                      {{ item.noticeTitle || item.title }}
                    </div>
                    <div class="t_time">
                      {{
                        item.startTime
                          ? parseTime(item.startTime)
                          : parseTime(item.createTime)
                      }}
                    </div>
                  </div>
                </template>
                <div
                  @click="
                    answerQuestion(
                      item.keyId,
                      item.markStatus,
                      item.recipientId,
                      item
                    )
                  "
                  :class="[
                    't_content',
                    item.noticeClass == 3 ? 't_content_questionnaires' : '',
                    item.noticeClass == 3 ? 'shou' : '',
                  ]"
                  v-html="item.noticeContent || item.content"
                ></div>
                <div
                  v-if="item.noticeFiles && item.noticeFiles.length > 0"
                  style="margin: 10px 0 0 10px; font-weight: 600; color: black"
                >
                  附件：
                </div>
                <div
                  style="padding: 0 10px"
                  v-for="(fileitem, fileindex) in item.noticeFiles"
                  :key="fileindex"
                >
                  <el-link @click="openfile(fileitem)" type="primary">
                    {{ fileitem.name }}
                  </el-link>
                </div>
              </el-collapse-item>
            </el-collapse>
            <el-empty v-else description="暂无通知"></el-empty>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  changeReadStatus,
} from "@/api/notificationCenter/notification";
import { updatePost_readmessage } from "@/api/home/message";
export default {
  props: {
    open: Boolean,
    arr: Array,
    type: String,
  },
  data() {
    return {
      activeTitle: "全部",
      questionnairesUnread: 0,
      questionnaires_tip: "",
      questionnairesList: [],
      systemUnread: 0,
      systemUnread_tip: "",
      systemList: [],
      schoolUnread: 0,
      schoolUnread_tip: "",
      schoolList: [],
      allUnread: 0,
      allUnread_tip: "",
      allList: [],
      showList: [],
    };
  },
  watch: {
    activeTitle(e) {
      switch (e) {
        case "全部":
          this.showList = this.allList;
          break;
        case "学校通知":
          this.showList = this.schoolList;
          break;
        case "系统通知":
          this.showList = this.systemList;
          break;
        case "问卷通知":
          this.showList = this.questionnairesList;
          break;
      }
    },
    async open(e) {
      if (e) {
        this.activeTitle = this.type == "teacher" ? "全部" : "学校通知";
        this.allList = this.arr.sort((a, b) =>
          b.createTime.localeCompare(a.createTime)
        );
        this.showList = this.allList;
        // 1系统 2学校 3问卷
        this.systemList = this.arr.filter((notice) => notice.noticeClass == 1);
        this.schoolList = this.arr.filter((notice) => notice.noticeClass == 2);
        this.questionnairesList = this.arr.filter(
          (notice) => notice.noticeClass == 3
        );
        // 获取未读取的字眼
        const systemObj = this.systemList.find((item) => {
          return item.readStatus == false;
        });
        this.systemUnread_tip = systemObj
          ? systemObj.noticeTitle
          : this.systemList.length > 0
          ? this.systemList[0].noticeTitle
          : "";

        const schoolObj = this.schoolList.find((item) => {
          return item.readStatus == false;
        });
        this.schoolUnread_tip = schoolObj
          ? schoolObj.noticeTitle
          : this.schoolList.length > 0
          ? this.schoolList[0].noticeTitle
          : "";

        const questionnairesObj = this.questionnairesList.find((item) => {
          return item.readStatus == 0;
        });
        this.questionnaires_tip = questionnairesObj
          ? questionnairesObj.title
          : this.questionnairesList.length > 0
          ? this.questionnairesList[0].title
          : "";

        const allObj = this.allList.find((item) => {
          return item.readStatus == 0 || item.readStatus == false;
        });

        this.allUnread_tip = allObj
          ? allObj.title || allObj.noticeTitle
          : this.allList.length > 0
          ? this.allList[0].title || this.allList[0].noticeTitle
          : "";
        this.getUnread();
      }
    },
  },
  mounted() {},
  methods: {
    clearUnread() {},
    // 打开问卷
    answerQuestion(id, markStatus, userId, item) {
      if (item.msgType == 7) {
        this.$emit("update:open", false);
        this.$router.push({
          path: "/question",
          query: {
            id: id,
            markStatus: markStatus,
            userId: userId,
          },
        });
      }
    },
    openfile(file) {
      window.open(file.url, "_blank");
    },
    // 获取总未读数量
    getUnread() {
      this.allUnread = this.allList.filter(
        (notice) => notice.readStatus === 0 || notice.readStatus === false
      ).length;
      const systemUnread = this.arr.filter(
        (notice) => notice.noticeClass == 1 && notice.readStatus === false
      ).length;
      this.systemUnread = systemUnread < 99 ? systemUnread : 99;
      const schoolUnread = this.arr.filter(
        (notice) => notice.noticeClass !== 1 && notice.readStatus === false
      ).length;
      this.schoolUnread = schoolUnread < 99 ? schoolUnread : 99;

      this.questionnairesUnread = this.questionnairesList.filter(
        (notice) => notice.readStatus === 0
      ).length;
      console.log("获取总未读数量");
      this.$emit("close", this.allUnread);
    },
    async clickCollapse(e, index) {
      // 1系统 2学校 3问卷
      if (e.noticeClass == 2) {
        await changeReadStatus(e.noticeId);
        this.showList[index].readStatus = true;
        this.getUnread();
      } else if (e.noticeClass == 1) {
        await changeReadStatus(e.noticeId);
        this.showList[index].readStatus = true;
        this.getUnread();
      } else {
        await updatePost_readmessage(e.id);
        this.showList[index].readStatus = 1;
        this.getUnread();
      }
    },
    handleChange(val) {},
    cancel() {
      this.$emit("update:open", false);
    },
  },
};
</script>
<style scoped lang="scss">
.clear_all_icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
  user-select: none;
  margin-left: 6px;
  margin-top: 2px;
}

.t_content_questionnaires:hover,
.t_content_questionnaires:focus {
  color: #41ba9c;
  text-decoration: underline;
  text-decoration-color: #41ba9c;
}

::v-deep .el-dialog__header {
  display: none;
}

::v-deep .el-dialog__body {
  padding: 0 !important;
}

::v-deep .el-dialog {
  overflow: hidden;
  border-radius: 25px !important;
  background: #f7f9fa;
  height: 600px;
}

::v-deep .el-collapse-item {
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: 10px !important;
}

::v-deep .el-collapse-item__header {
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 12px !important;
}

::v-deep .el-collapse-item__arrow {
  display: block !important;
}

.right {
  // width: 600px;
  flex: 1;
  box-sizing: border-box;

  padding: 0 24px;

  .right_title {
    font-size: 16px;
    font-weight: 600;
    color: #1c1f23;
  }

  .right_close {
    width: 12px;
    height: 12px;
    user-select: none;
  }

  .right_list {
    height: 508px;
    overflow-y: auto;
  }

  .t {
    .unread {
      width: 6px;
      height: 6px;
      background: red;
      top: 13px;
      left: -7px;
      border-radius: 50%;
    }

    .t_t {
      width: 350px;
      color: #1c1f23;
      font-size: 14px;
    }

    .t_time {
      padding: 0 5px;
      color: rgba(30, 32, 35, 0.45);
      font-size: 12px;
      font-weight: 400;
    }
  }

  .t_content {
    padding: 0 10px 10px 10px;
  }
}

.left {
  width: 250px;
  background: white;

  .left_title {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-weight: 600;
    color: #1c1f23;
    font-size: 20px;
  }

  .left_list {
    height: 508px;
    overflow-y: auto;

    .left_list_item {
      background: #f7f9fa;
      padding: 14px 16px;
      margin: 0 auto 12px auto;
      border-radius: 12px;
      width: 226px;
      height: 76px;
      box-sizing: border-box;

      .left_list_item_icon {
        margin-right: 12px;
        width: 48px;
        height: 48px;
      }

      .left_list_item_title {
        .titleUnread {
          text-align: center;
          line-height: 20px;
          font-size: 14px;
          color: white;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: red;
          top: -7px;
          left: 65px;
        }

        height: 24px;
        line-height: 24px;
        color: #1c1f23;
        font-size: 16px;
        font-weight: 600;
      }

      .left_list_item_content {
        width: 134px;
        height: 24px;
        line-height: 24px;
        color: rgba(30, 32, 35, 0.65);
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}
</style>
